<template>
	<view class="map-container">
		<map class="map" id="map" :longitude="longitude" :latitude="latitude" scale="14" :show-location="true"
			:markers="markers" @markertap="makertap">
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: "",
				longitude: "",
				markers: [],
			}
		},
		// latitude: 39.558242
		// longitude: 118.13239
		mounted() {
			//获取全部makers位置信息
			let url = "/api/station/list";
			this.$u.get(url, {
				orderByColumn: 'createTime',
				isAsc: 'desc'
			}).then(result => {
				let arr = result.rows;
				// this.markers = result.rows;
				arr.forEach((item, index, arr) => {
					let content = item.stationName
					let label = {
						content: '站点名称', // 必选
						color: '#333', // 文本颜色
						bgColor: '#FFFFFF', // 背景色（默认透明，需显式设置）
						fontSize: 14, // 文字大小
						borderRadius: 4, // 圆角
						padding: 6, // 内边距
						anchorY: -35, // 垂直偏移（负值表示上方）
						textAlign: 'center' // 文本对齐
					}
					arr[index].lable = label;
					arr[index].width = "15px";
					arr[index].height = "15px";
					if(index%2 == 0){
						arr[index].iconPath =  '/static/img/index/cover_2022/yz.svg'
					}else{
						arr[index].iconPath =  '/static/img/index/cover_2022/jia.svg'
					}
				});
				this.markers = arr;
				console.log(this.markers)
			});
			// 引入百度地图API
			// const bmap = require('../../libs/bmap-wx.js');
			// const BMapWX = bmap.BMapWX;
			// var BMap = new BMapWX({
			// 	ak: 'e4jdvlI70cFnqLteaPKpglwKpD1DCjrZ',
			// });
			uni.getLocation({
				type: 'gcj02', // 坐标类型，常用的有'gcj02'（国测局坐标）、'wgs84'（GPS坐标），根据需求选择
				success: (res) => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					console.log('获取到的纬度：', res.latitude);
					console.log('获取到的经度：', res.longitude);

				},
				fail: (err) => {
					console.error('获取位置失败：', err);
				}
			});
			// 调用百度地图API进行逆地址解析（从经纬度转换为地址信息）
			// BMap.regeocoding({
			// 	location: this.latitude + "," + this.longitude, //这里传的是经纬度
			// 	fail: resp => {
			// 		console.log(resp, '失败');
			// 	},
			// 	success: resp => {
			// 		console.log(resp, '成功');
			// 	},
			// });
		},
		methods: {
			makertap(e) {
				console.log("这是标记点的点击事件", e);
				var makerId = Number(e.detail.markerId);
				let url = "/api/station/" + makerId;
				this.$u.get(url).then(result => {
					let maker = result.data;
					this.goMap(maker)
				});

			},
			goMap(maker) {
				wx.openLocation({
					latitude: Number(maker.latitude),
					longitude: Number(maker.longitude),
					name: maker.stationName,
					// address: this.province_name + this.info.city_name + this.info.area_name + this.info
					// 	.address,
					scale: 20
				})
			}
		},
	};
</script>

<style scoped>
	.map-container {
		width: 100%;
		height: 500px;
	}

	.map {
		width: 100%;
		height: 100%;
	}
</style>